<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="尝试在软件工程的订餐系统项目里面尝试着使用了一些理念:

RestAPI
模拟代数数据结构(函数式里的理念)
RequireJs管理前端js
中间件拦截非法请求(权限控制)
routes和controllers和models的目录和文件最好保持一致
在前端Js尝试使用类似IO monad的方式来进行链式操作(类似express中间件系统),尝试用链式操作完成所有前端工作

下面对某些点进行展开">
    

    <!--Author-->
    
        <meta name="author" content="kobako">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="软工项目总结,Express项目架构实践"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Kobako"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

    <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>软工项目总结,Express项目架构实践 - Kobako</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/kobako-blog/css/style.css">

    <!-- Google Analytics -->
    


</head>


<body>

<div class="bg-gradient"></div>
<div class="bg-pattern"></div>

<!-- Menu -->
<!--Menu Links and Overlay-->
<div class="menu-bg">
    <div class="menu-container">
        <ul>
            
            <li class="menu-item">
                <a href="/kobako-blog/">
                    主页
                </a>
            </li>
            
            <li class="menu-item">
                <a href="/kobako-blog/archives">
                    历史文章
                </a>
            </li>
            
        </ul>
    </div>
</div>

<!--Hamburger Icon-->
<nav>
    <a href="#menu"></a>
</nav>

<div class="container">

    <!-- Main Content -->
    <div class="row">
    <div class="col-sm-12">

        <!--Title and Logo-->
        <header>
    <div class="logo">
        <a href="/kobako-blog/"><i class="logo-icon fa fa-apple" aria-hidden="true"></i></a>
        
    </div>
</header>

        <section class="main">
            
<div class="post">

    <div class="post-header">
        <h1 class="title">
            <a href="/kobako-blog/2018/06/08/express-project-structure-design/">
                软工项目总结,Express项目架构实践
            </a>
        </h1>
        <div class="post-info">
            
                <span class="date">2018-06-08</span>
            
            
            
        </div>
    </div>

    <div class="content">

        <!-- Gallery -->
        

        <!-- Post Content -->
        <p>尝试在软件工程的订餐系统项目里面尝试着使用了一些理念:</p>
<ol>
<li>RestAPI</li>
<li>模拟代数数据结构(函数式里的理念)</li>
<li>RequireJs管理前端js</li>
<li>中间件拦截非法请求(权限控制)</li>
<li>routes和controllers和models的目录和文件最好保持一致</li>
<li>在前端Js尝试使用类似IO monad的方式来进行链式操作(类似express中间件系统),尝试用链式操作完成所有前端工作</li>
</ol>
<p>下面对某些点进行展开</p>
<a id="more"></a>
<h4 id="RestAPI"><a href="#RestAPI" class="headerlink" title="RestAPI"></a>RestAPI</h4><p>这个还是很有意义的,使用了这样的理念,路由代码量明显减少,而且代码感觉也更好写了,像是前端不用查看后端代码写了什么样的接口,记得用http方法就好了.</p>
<p>虽然用不了纯正的REST理念,因为不保存session实在是很难操作,像登录之类的.但是绝大多数时候使用它就已经很有意义了</p>
<h4 id="代数数据结构"><a href="#代数数据结构" class="headerlink" title="代数数据结构"></a>代数数据结构</h4><p>语言本身不支持代数数据结构的话,其实要用起来还是挺麻烦的,但是github上面有js的Maybe库,自己尝试着写了一个,感觉还是挺好用的</p>
<h4 id="requireJs"><a href="#requireJs" class="headerlink" title="requireJs"></a>requireJs</h4><p>这个在另外一篇博客里总结了</p>
<h4 id="中间件权限控制"><a href="#中间件权限控制" class="headerlink" title="中间件权限控制"></a>中间件权限控制</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="built_in">require</span>(<span class="string">'express'</span>).Router</span><br><span class="line">router.route(<span class="string">'/'</span>)</span><br><span class="line">  .all(abort_not_login)</span><br><span class="line">  .get(<span class="comment">/*...*/</span>)</span><br><span class="line">  .post(<span class="comment">/*在这里用中间件对post进行单独权限控制*/</span>)</span><br><span class="line">  .post(<span class="comment">/*...*/</span>)</span><br></pre></td></tr></table></figure>
<h4 id="伪造IO-monad"><a href="#伪造IO-monad" class="headerlink" title="伪造IO monad"></a>伪造IO monad</h4><p>参考Haskell里面的IO,可以发现很多函数可以是不返回值的(返回IO ()),或者返回值可以被调用链的下一个函数忽视,也就是说,链式操作,不一定要求返回值和参数环环相扣,只要能把IO monad里面的Realworld传递下去就行了</p>
<p>但是将express中间件跟IO类比的时候我又产生了一个问题,中间件可以从req里面将数据拿出来,可是Haskell怎么从Realworld里面拿东西出来?</p>
<p>又或者问一个本质一点的问题: 中间件是monad的子集?</p>
<p>在实际实现的过程中可以看到,我们对realworld其实并不太关心,我们更关心的是从上一个函数里面返回的结果,尝试将Realworld封装起来</p>
<blockquote>
<p>TODO: 尝试实现一个Monad库</p>
</blockquote>

    </div>

    

    

    <!-- Comments -->
    

</div>
        </section>

    </div>
</div>


</div>

<!-- Footer -->
<div class="push"></div>

<footer class="footer-content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 footer-about">
                <h2>关于</h2>
                <p>
                    将就用来写一下技术博客
                </p>
            </div>
            
    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
        <h2>最近文章</h2>
        <ul>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/14/elm-route-learn/">elm路由学习</a>
            </li>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/13/git-submodule-bug/">git-submodule的使用以及bug</a>
            </li>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/12/english-learn-note/">学习英语笔记</a>
            </li>
            
            <li>
                <a class="footer-post" href="/kobako-blog/2018/06/08/express-project-structure-design/">软工项目总结,Express项目架构实践</a>
            </li>
            
        </ul>
    </div>



            
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <ul class="list-inline footer-social-icons">
                    
                    <li class="list-inline-item">
                        <a href="https://github.com/zhuobinggang">
                            <span class="footer-icon-container">
                                <i class="fa fa-github"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    <li class="list-inline-item">
                        <a href="mailto:zhuobinggang@gmail.com">
                            <span class="footer-icon-container">
                                <i class="fa fa-envelope-o"></i>
                            </span>
                        </a>
                    </li>
                    
                    
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="footer-copyright">
                    @kobako All right reserved
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- After footer scripts -->

<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Tween Max -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Custom JavaScript -->
<script src="/kobako-blog/js/main.js"></script>

<!-- Disqus Comments -->



</body>

</html>